<template>
	<div>
		<Header />
		<div class="indexContainer">
			<div class="mapNav">
			    <div class="indexContainer">
			        <el-breadcrumb separator-class="el-icon-arrow-right">
			            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			            <el-breadcrumb-item :to="{ path: '/AlgorithmTools' }">产品列表页</el-breadcrumb-item>
									<el-breadcrumb-item :to="{ path: '/AlgorithmToolsDetail' }">产品详情页</el-breadcrumb-item>
							<!-- <el-breadcrumb-item></el-breadcrumb-item> -->
			        </el-breadcrumb>
			    </div>	
			</div>
			<!-- <div class="indexContainer mobileFontSize12"
				style="display: flex;align-items: center;font-size: 16px;color: #999;padding: 10px 0;">
				<span>首页</span>
				<span style="padding: 0 5px;">></span>
				<span>学习园地</span>
				<span style="padding: 0 5px;">></span>
				<span>学习园地详情</span>
			</div> -->
			<!-- <div style="margin: 10px 0;">
				<div class="mobileFontSize12"
					style="display: flex;align-items: center;font-size: 16px;padding: 10px 10px;width: 72%;background-color: #fff;margin-top:10px;color: #83827E;">
					<span @click="gotoIndex()" style="cursor: pointer;">首页</span>
					<span style="padding: 0 5px;">></span>
					<span @click="gotoList()" style="cursor: pointer;">产品列表页</span>
					<span style="padding: 0 5px;">></span>
					<span>产品详情页</span>
				</div> 
			</div> -->
			<div class="flexs">
				<div class="left">
					<div>
						<img style="border: 1px solid #D1D1D1;height: 395px;" :src="images"  />
					</div>
					<div style="display: flex;justify-content: space-between;border: 1px solid #D1D1D1;align-items: center;padding: 10px 0;margin-top: 20px;">
						<div style="width: 20px;text-align: center;" @click="scrollToPositions()"><i class="el-icon-arrow-left"></i></div>
						<div>
							<div ref="myDiv" style="width: 485px;border: 1px solid #D1D1D1;white-space: nowrap;overflow-x: scroll;transition: transform 0.3s ease;transition-delay: 0.2s;" >
								<img class="ims" @mouseover="handleMouseOver(i.url)" v-for="i in thumbnail" style="width: 150px;height: 105px;border: 1px solid #D1D1D1;display: inline-block;margin-right: 15px;" :src="i.url"  />
							</div>
						</div>
						<div style="width: 20px;text-align: center;" @click="scrollToPosition()"><i class="el-icon-arrow-right"></i></div>
					</div>
				</div>
				<div class="right">
					<div style="display: flex;align-items: center;border-bottom: 2px solid #F1F1F1;padding-bottom: 20px;">
						<img style="width: 6px; height: 34px;margin-top: 2px;" src="@/assets/images/ApplicationProducts12.png"  />
						<p style="color: #60625F;font-size: 30px;font-weight: bold;margin-left: 15px;">{{listData.title}}</p>
					</div>
					<div style="color: #807F7B;font-size: 16px;">
						<p style="margin: 10px 0;">供应商名称：{{listData.supplier}}</p>
						<div style="display: flex;justify-content: space-between;">
							<div style="display: flex;margin: 10px 0;">
								<span style="margin-right: 50px;">交易量：{{listData.transaction}}</span>
								<span>访问量：{{listData.visit}}</span>
							</div>
							<div style="display: flex;">
								<div style="display: flex;align-items: center;">
									<img v-if="dz==1" @click="qxdianzan()" style="width: 20px; height: 20px;margin-top: 2px;cursor: pointer;" src="@/assets/images/ApplicationProducts13.png"  />
									<img v-if="dz==2" @click="dianzan()" style="width: 20px; height: 20px;margin-top: 2px;cursor: pointer;" src="@/assets/images/ApplicationProducts13 (2).png"  />
									<img v-if="dz==-1" @click="dianzan()" style="width: 20px; height: 20px;margin-top: 2px;cursor: pointer;" src="@/assets/images/ApplicationProducts13 (2).png"  />
									<p style="margin-left: 5px;">点赞：{{listData.praise}}</p>
								</div>
								<div style="display: flex;align-items: center;margin-left: 50px;">
									<img v-if="sc==1" @click="qxshoucang()" style="width: 20px; height: 20px;margin-top: 2px;cursor: pointer;" src="@/assets/images/ApplicationProducts14.png"  />
									<img v-if="sc==2" @click="shoucang()" style="width: 20px; height: 20px;margin-top: 2px;cursor: pointer;" src="@/assets/images/ApplicationProducts14（2）.png"  />
									<img v-if="sc==-1" @click="shoucang()" style="width: 20px; height: 20px;margin-top: 2px;cursor: pointer;" src="@/assets/images/ApplicationProducts14（2）.png"  />
									<p style="margin-left: 5px;">收藏：{{listData.collect}}</p>
								</div>
							</div>
						</div>
						<div style="display: flex;margin: 10px 0;">
							<div style="display: flex;align-items: center;">
								<img style="width: 20px; height: 20px;margin-top: 2px;" src="@/assets/images/ApplicationProducts5.png"  />
								<span style="margin-left: 5px;">上架时间：{{listData.shelfTime}}</span>
							</div>
							<div style="display: flex;align-items: center;margin-left: 20px;">
								<img style="width: 20px; height: 20px;margin-top: 2px;" src="@/assets/images/ApplicationProducts6.png"  />
								<span v-if="listData.updateFrequency == 5" style="margin-left: 5px;">更新频率：每年</span>
								<span v-if="listData.updateFrequency == 4" style="margin-left: 5px;">更新频率：每月</span>
								<span v-if="listData.updateFrequency == 3" style="margin-left: 5px;">更新频率：每周</span>
								<span v-if="listData.updateFrequency == 2" style="margin-left: 5px;">更新频率：每天</span>
								<span v-if="listData.updateFrequency == 1" style="margin-left: 5px;">更新频率：实时</span>
							</div>
						</div>
						<div style="margin-top: 30px;">
							{{listData.description}}
						</div>
						<div style="display: flex;padding: 8px 0px;margin: 10px 0;">
							 <div v-if="listData.source==1" style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;margin-right: 20px;">内部产品</div>
							 <div v-if="listData.source==2" style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;margin-right: 20px;">外部产品</div>
							 <div style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;margin-right: 20px;">{{listData.categoryName}}</div>
							 <div v-if="listData.isFree == 1" style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;">免费产品</div>
							 <div v-if="listData.isFree == 2" style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;">收费产品</div>
						</div>
						<div v-if="jfList.length!=0">
							<div style="display: flex;">
								<div class="jifen" style="background-color: #F8F8F8;color: #000;">购买方式</div>
								<div class="jifen" v-for="item in jfList" :key="item.id">{{item.group}}</div>
							</div>
							<div style="display: flex;">
								<div class="jifen" style="background-color: #F8F8F8;color: #000;">积分</div>
								<div class="jifen" v-for="item in jfList" :key="item.id">{{item.money}}</div>
							</div>
						</div>
						<div style="text-align: right;margin-top: 50px;">
							<span v-if="jfList.length==0" @click="jrgwc()" style="padding: 10px 15px;background-color: #2A69ED;color: #fff;cursor: pointer;">加入购物车</span>
							<span v-if="jfList.length!=0" @click="dialogVisible = true" style="padding: 10px 15px;background-color: #2A69ED;color: #fff;cursor: pointer;">加入购物车</span>
						</div>
						<el-dialog
						  title="选择购买时长"
						  :visible.sync="dialogVisible"
						  width="30%"
						  :before-close="handleClose">
						  <div style="width: 400px;margin: 0 auto;text-align: center;">
								<div style="display: flex;justify-content: space-between;">
									<div>
										<div>选择</div>
										<div style="margin: 10px 0;" v-for="item in jfList"><el-radio v-model="radio" :label="item.id">{{item.index}}</el-radio></div>
									</div>
									<div>
										<div>购买方式</div>
										<div style="margin: 10px 0;" v-for="item in jfList">{{item.group}}</div>
									</div>
									<div>
										<div>积分</div>
										<div style="margin: 10px 0;" v-for="item in jfList">{{item.money}}</div>
									</div>
								</div>
							</div>
						  <span slot="footer" class="dialog-footer">
						    <el-button @click="dialogVisible = false">取 消</el-button>
						    <el-button @click="jrgwc()" type="primary">确 定</el-button>
						  </span>
						</el-dialog>
					</div>
				</div>
			</div>
			<div style="margin-top: 50px;margin-bottom: 50px;">
				<div class="tabs">
					<div style="display: flex;background-color: #F7F7F7;border-bottom: 1px solid #93B5E8;">
						<div class="bqy" :class="{ activeTab: currentTab === 'tab1' }" @click="changeTab('tab1')">产品介绍</div>
						<div class="bqy" :class="{ activeTab: currentTab === 'tab2' }" @click="changeTab('tab2')">产品规格</div>
						<div class="bqy" :class="{ activeTab: currentTab === 'tab3' }" @click="changeTab('tab3')">售后保障</div>
						<div class="bqy" :class="{ activeTab: currentTab === 'tab4' }" @click="changeTab('tab4')">商品评价</div>
						<div class="bqy" :class="{ activeTab: currentTab === 'tab5' }" @click="changeTab('tab5')">供应商产品</div>
					</div>
				    
				  
					<!-- 产品介绍 -->
					<div v-if="currentTab === 'tab1'" class="content">
						<div style="margin-top: 30px;" v-html="listData.produce"></div>
					</div>
					
					<!-- 产品规格 -->
					<div v-else-if="currentTab === 'tab2'" class="content">
						<div style="margin-top: 30px;" v-html="listData.specification"></div>
					</div>
					
					<!-- 售后保障 -->
					<div v-else-if="currentTab === 'tab3'" class="content">
						<div style="margin-top: 30px;" v-html="listData.afterSale"></div>
					</div>
					<!-- 商品评价 -->
					<div v-else-if="currentTab === 'tab4'" class="content">
						<el-empty v-if="pjList.length==0" :image-size="100"  description="暂无数据"></el-empty>
						<div style="margin: 30px; 0">
							<div v-for="item in pjList" :key="item.id" style="padding-bottom: 30px;border-bottom: 1px solid #E8E8E8;">
								<p style="color: #595959;">{{item.userEvaluate}}</p>
								<div style="display: flex;margin-top: 10px;">
									<div style="display: flex;margin-right: 60px;">
										<div>评分：</div>
										<el-rate
										  v-model="item.userGrade"
											disabled>
										</el-rate>
									</div>
									<div style="width:200px">
										<span>发布者：</span>
										<span>{{item.createUser}}</span>
									</div>
									<div>
										<span>发布时间：</span>
										<span>{{item.updateTime}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 供应商产品 -->
					<div v-else-if="currentTab === 'tab5'" class="content">
						<el-empty v-if="gysList.length==0" :image-size="100"  description="暂无数据"></el-empty>
						<div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 30px;">
							<div v-for="i in gysList" :key="i.id" style="width: 24.2%;margin-bottom: 14px;">
								<div><img @click="gotoDetail(i.id)" style="width: 100%; height: 234px;cursor: pointer;border: 1px solid #DFE4E8;" :src="i.thumbnail" /></div>
								<div @click="gotoDetail(i.id)" style="display: flex;align-items: center;padding: 10px 5px;cursor: pointer;"><img style="width: 5px; height: 16px;margin-right: 8px;" src="@/assets/images/ApplicationProducts2.png"  />{{i.title}}</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<Footer />
	</div>
</template>

<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import {
		ApplicationProductsDetail,
		ApplicationProductsGetPictureById,
		dianzans,
		qxdianzans,
		shoucangs,
		qxshoucangs,
		jrgwcs,
		integral,
		evaluate,
		productList
	} from "@/request/api/AlgorithmTools";
	export default {
		components: {
			Header,
			Footer,
			
		},
		data() {
			return {
				num:0,
				leng:'',
				images:'',
				id:'',
				userId:'',
				dz:0,
				sc:0,
				consumId:'',
				value:2,
				dialogVisible: false,
				radio: -1,
				thumbnail:[
					// {url:'http://localhost:3001/img/ApplicationProducts4.1bc4ea4d.png'},
					// {url:'http://localhost:3001/img/ApplicationProducts11.72feeaef.png'},
					// {url:'http://localhost:3001/img/ApplicationProducts4.1bc4ea4d.png'},
					// {url:'http://localhost:3001/img/ApplicationProducts11.72feeaef.png'},
					// {url:'http://localhost:3001/img/ApplicationProducts4.1bc4ea4d.png'},
					// {url:'http://localhost:3001/img/ApplicationProducts11.72feeaef.png'},
				],
				listData:[],
				pjList:[], // 评价
				gysList:[], // 供应商列表
				currentTab: "tab1", // 默认选中第一个选项卡
				jfList:[]
			};
		},
		created() {
			this.id = this.$route.query.id
			this.userId = this.$route.query.userId
			this.getList()
		},
		mounted() {
			// console.log("mounted");
		},
		methods: {
			scrollToPosition() {
				this.$refs.myDiv.scrollLeft = this.leng; // 设置滚动条位置	右			
			},
			scrollToPositions() {
				let num = this.leng * -1
				this.$refs.myDiv.scrollLeft = num; // 设置滚动条位置	左		
			},
			handleMouseOver(url) {// 鼠标悬浮
				this.images = url
				// console.log("鼠标已经悬浮在此",this.images);
			},
			changeTab(newTab) {
				this.currentTab = newTab;
			},
			// 获取列表
			getList() {
				let param = {
					id:this.id,
					userId:this.userId,
					type:1
				}
				ApplicationProductsDetail(param).then((res) => {
					document.querySelector('meta[name="keywords"]').setAttribute('content',res.data.data.keyword)
					document.querySelector('meta[name="description"]').setAttribute('content',res.data.data.description)
					document.title = res.data.data.title
					// console.log('res.data',res.data)
					// console.log('res.data',res.data.data.description)
					if (res.data.code == 1) {
						this.listData = res.data.data
						// console.log('this.listData---------------------',this.listData)
							this.dz = this.listData.isPraise
							this.sc = this.listData.isCollect
							let date = new Date(this.listData.shelfTime);
							let year = date.getFullYear();
							let month = ("0" + (date.getMonth() + 1)).slice(-2);
							let day = ("0" + date.getDate()).slice(-2);
							let hours = ("0" + date.getHours()).slice(-2);
							let minutes = ("0" + date.getMinutes()).slice(-2);
							let seconds = ("0" + date.getSeconds()).slice(-2);
							let times =  `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
							// console.log('times-----',times)
							this.listData.shelfTime = times
							this.supplier = this.listData.supplier
							// console.log('this.listData.shelfTime-----',this.listData.shelfTime)
							this.gys()
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
				// 轮播图
				ApplicationProductsGetPictureById({id:this.id}).then((res) => {
					// console.log('res.data------轮播',res.data)
					if (res.data.code == 1) {
						this.thumbnail = res.data.data
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
					let lengths = this.thumbnail.length
					for(let i=0;i<lengths;i++){
						this.num = this.num + 150
					}
					this.leng = this.num
					// console.log('leng',this.leng)
					this.images = this.thumbnail[0].url
					// console.log('this.image',this.images)
					// console.log('this.thumbnail------轮播',this.thumbnail)
				}).catch((err) => {
					console.log('err', err)
				})
				// 获取积分信息
				integral({id:this.id}).then((res) => {
					console.log('积分----res.data',res.data.data[0].id)
					if (res.data.code == 1) {
						// console.log('购物车----res.data',res.data.data[0].id)
						this.jfList = res.data.data
						this.consumId = res.data.data[0].id
						// console.log('jifen----this.jfList',this.jfList)
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
				// 评价列表
				evaluate({id:this.id}).then((res) => {
					if (res.data.code == 1) {
						// console.log('评价列表----res.data',res.data)
						this.pjList = res.data.data
						this.pjList.forEach((res)=>{
							// console.log('res.updateTime',res.updateTime)
							let date = new Date(res.updateTime);
							let year = date.getFullYear();
							let month = ("0" + (date.getMonth() + 1)).slice(-2);
							let day = ("0" + date.getDate()).slice(-2);
							let hours = ("0" + date.getHours()).slice(-2);
							let minutes = ("0" + date.getMinutes()).slice(-2);
							let seconds = ("0" + date.getSeconds()).slice(-2);
							let times =  `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
							// console.log('times-----',times)
							res.updateTime = times
							// this.value = res.userGrade
							// console.log('res.shelfTime-----',res.shelfTime)
						})
						// console.log('评价列表----this.pjList',this.pjList)
						// console.log('发布时间----this.updateTime',this.pjList.updateTime)
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
				
				
				
			},
			gys(){
				let supplier = this.listData.supplier
				// 供应商产品列表
				productList({supplier:supplier,type:1}).then((res) => {
					if (res.data.code == 1) {
						// console.log('供应商产品列表----res.data',res.data)
						this.gysList = res.data.data
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 点赞
			dianzan(){
				
				// console.log('this.dz',this.dz)
				let data = {
					promodId:this.id,
					userId:this.userId
				}
				dianzans(data).then((res) => {
					if (res.data.code == 1) {
						this.dz = 1
						this.listData.praise = this.listData.praise +1
						this.$message({
							message: '点赞成功！',
							type: 'success'
						});
						// console.log('点赞成功')
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 取消点赞
			qxdianzan(){
				
				let data = {
					promodId:this.id,
					userId:this.userId
				}
				qxdianzans(data).then((res) => {
					if (res.data.code == 1) {
						this.dz = 2
						this.listData.praise = this.listData.praise -1
						this.$message({
							message: '取消点赞成功！',
							type: 'success'
						});
						// console.log('取消点赞成功')
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 收藏
			shoucang(){
				
				let data = {
					promodId:this.id,
					userId:this.userId
				}
				shoucangs(data).then((res) => {
					if (res.data.code == 1) {
						this.sc = 1
						this.listData.collect = this.listData.collect +1
						this.$message({
							message: '收藏成功！',
							type: 'success'
						});
						// console.log('收藏成功')
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 取消收藏
			qxshoucang(){
				
				let data = {
					promodId:this.id,
					userId:this.userId
				}
				qxshoucangs(data).then((res) => {
					if (res.data.code == 1) {
						this.sc = 2
						this.listData.collect = this.listData.collect -1
						this.$message({
							message: '取消收藏成功！',
							type: 'success'
						});
						// console.log('取消收藏成功')
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 加入购物车
			jrgwc(){
				// console.log('this.radio',this.radio)
				let params = {
					consumId:this.radio,
					promodId:this.id,
					userId:this.userId
				}
				jrgwcs(params).then((res) => {
					if (res.data.code == 1) {
						// this.sc = 1
						this.$message({
							message: '加入购物车成功！',
							type: 'success'
						});
						this.dialogVisible = false
						this.bus.$emit("shopCount");//加入购物车成功后，重新调用购物车数量接口
						// console.log('收藏成功')
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			gotoDetail(id) {
				this.$router.push({
					name:"AlgorithmToolsDetail",
					query:{
						id,
						userId:this.userId
					}
				});
				location.reload();
			},
			gotoIndex(){
				this.$router.push({
					name:"index",
					
				});
			},
			gotoList(){
				this.$router.push({
					name:"AlgorithmTools",
					
				});
			}
		},
	};
</script>

<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 0 10px !important;
		}

		.mobileNone {
			display: none;
		}

		.mobileBlock {
			display: block !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}
	.flexs{
		display: flex;
		justify-content: space-between;
		.left{
			width: 41%;
			img{
				width: 100%;
			}
		}
		.right{
			// border: 1px solid red;
			width: 48%;
		}
	}
	.ims{
		transition: transform 0.3s ease;
	}
	.ims:hover{
		transform: scale(1.03); 
	}
	/* CSS样式 */
	.activeTab {
	  background-color: #2A6AF0;
	  color: #fff;
	}
	// .content {
	//   display: none; /* 隐藏非活动选项卡的内容 */
	// }
	.bqy{
		padding: 15px 35px;
	}
	// .bqy:hover{
	// 	padding: 15px 35px;
	// 	background-color: #2A6AF0;
	// 	color: #fff;
	// }
	.jifen{
		border: 1px solid #E8E8E8;
		width: 100px;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
	}
	.mapNav{
	   margin:20px 0;
	}
	.topTitle{
	    color:#fff;
	    height:100px;
	    font-size:30px;
	    line-height: 100px;
	    font-weight:800;
	    text-align: center;
	    background: url('~@/assets/images/cs4.png');
	}
</style>
